1.네이버 쇼핑 상품 분석 프로그램

파이썬 Flask로 "네이버 쇼핑 API 카테고리 상품 분석기" 웹 애플리케이션을 단일 파일(app.py)로 만들어줘. HTML 템플릿은 render_template_string으로 인라인 처리하고, 외부 파일 없이 app.py 하나로 전부 돌아가게 해줘.

========================================
프로그램 개요 
========================================
네이버 오픈API(쇼핑 검색)를 활용해서 특정 키워드의 상품 데이터를 대량 수집하고, 가격 통계, 브랜드 분석, 카테고리 분포, 경쟁 강도 등을 시각적으로 분석해주는 대시보드 웹앱이야.

사용자가 브라우저에서 네이버 개발자센터 Client ID/Secret을 직접 입력하고, 검색어와 필터 조건을 설정한 뒤 "분석 시작" 버튼을 누르면 백엔드(Flask)가 네이버 API를 호출해서 상품을 수집하고, 통계를 계산해서 JSON으로 프론트에 돌려주는 구조야.

프론트엔드는 Chart.js로 다양한 차트를 그리고, 상품 목록을 테이블/카드/갤러리 3가지 뷰로 보여줘.

======================================== 
2. 기능
========================================
2-1. API 인증 및 검색 설정 (왼쪽 패널)

Client ID, Client Secret 입력 필드를 만들어줘. 기본은 password 타입으로 마스킹하고, 옆에 눈 모양 토글 버튼을 달아서 클릭하면 text/password를 전환해줘. 눈 모양은 👁 이모지, 숨김 상태는 🔒 이모지로 바꿔줘.
검색어 입력 필드 (기본값: "무선이어폰")
수집 건수 선택: 50, 100(기본), 200, 300, 500, 1000건 드롭다운
정렬 기준: 정확도순(sim), 날짜순(date), 가격 낮은순(asc), 가격 높은순(dsc)
필터 옵션: 전체 상품 / 네이버페이 연동 상품(naverpay)
제외 항목: 중고(used), 렌탈(rental), 해외직구(cbshop) — 체크박스로 만들되, 예쁜 커스텀 체크박스(동그란 점 스타일)로 해줘. 체크되면 테두리와 배경색이 민트색으로 변하게.
가격 범위 필터: 최소 가격, 최대 가격 숫자 입력 필드 (분석 결과에서 필터링)
"🔍 분석 시작" 버튼 — 민트색 그라데이션, 호버 시 살짝 위로 떠오르고 그림자 생기게.
분석 완료되면 왼쪽 패널 하단에 "빠른 요약" 섹션이 나타나서 수집 건수, 평균/최저/최고 가격, 브랜드 수를 간단히 보여줘.
2-2. 백엔드 API 수집 (/api/analyze)

POST 방식, JSON으로 파라미터 받아.
네이버 쇼핑 검색 API(https://openapi.naver.com/v1/search/shop.json) 호출.
display 최대 100이니까, 요청 건수에 따라 페이지네이션해서 여러 번 호출해줘. (start는 최대 1000까지)
응답의 lprice, hprice, productType은 int로 변환해줘.
price_min, price_max가 있으면 수집 후 필터링 적용.
API 에러, 타임아웃(10초), 빈 결과 등은 에러 메시지로 JSON 반환.
2-3. 통계 계산 (compute_stats 함수)

가격이 0보다 큰 상품만 가격 통계에 포함시켜줘. 아래 통계를 전부 계산해서 JSON으로 넘겨줘:

기본 통계: 총 수집 수, API 총 결과 수, 평균가, 중앙값, 표준편차, 변동계수(CV%), 최저가/최고가 및 해당 상품명, 가격 범위
사분위: Q1(n//4), Q2(중앙값), Q3(3n//4), IQR, 각 구간별 상품 수, IQR 기반 이상치(Q1-1.5IQR 미만 또는 Q3+1.5IQR 초과) 개수
카테고리1(대분류) 상위 15개 빈도
카테고리2(중분류) 상위 12개에 대해 최저/최고/평균 가격
쇼핑몰별 상품 수 상위 20개, 상위 3개 쇼핑몰 점유율(%)
상품 타입(productType) 분포
가격비교 상품(타입 1,4,7,10) 비율
브랜드별: 평균 가격 상위 15개, 브랜드별 상품 수/평균가/대표 상품(sample) 맵, 노브랜드 비율
상위 5개 브랜드 레이더 차트용 데이터: 축은 [상품 수, 평균 가격, 최고 가격, 최저 가격(역수 스케일), 가격 범위] — 모두 0~100으로 정규화.
가격 히스토그램: 구간 수는 min(20, max(5, n//5)). 레이블은 1만 이상이면 "X.X만~Y.Y만" 형식, 미만이면 "X~Y" 콤마 형식.
상품명 키워드 빈도: HTML 태그 제거, 특수문자 제거, 2글자 이상, 불용어(the, and, for, with, 무료배송, 당일발송, 특가, 할인, 세일, 국내, 정품, NEW, new, 사은품, 증정) 제외, 상위 50개
경쟁 강도: 가격 범위를 10등분해서 각 구간별 상품 수와 평균 가격
2-4. 프론트엔드 대시보드 (오른쪽 패널)

상단에 탭 네비게이션 4개를 넣어줘: 📊 대시보드, 📈 차트, 💡 인사이트, 📋 상품목록 탭은 가로로 나열하고, 활성 탭은 민트색 배경에 검은 글씨. 비활성은 투명.

--- 탭1: 대시보드 ---

통계 카드 그리드 (auto-fill, 최소 200px): 총 수집 상품, 평균 가격(중앙값 서브), 최저가, 최고가, 표준편차(CV 서브), 브랜드 수(쇼핑몰 수 서브), 가격비교 비율, 가격 범위(IQR 서브) 각 카드에 클래스로 accent/info/warning/danger 색상 구분.
차트 2개 가로 배치: 가격 분포 히스토그램(bar), 카테고리 대분류 비율(doughnut, cutout 55%, 범례 오른쪽)
--- 탭2: 차트 --- 총 8개 차트를 2열 그리드로 배치하되, 일부는 full-width(1열 전체 차지):

가격 vs 순위 버블차트 (full-width, tall) — 쇼핑몰별 색상 구분, 버블 크기는 해당 쇼핑몰 상품 수 비례. 상위 10개 쇼핑몰만. chartjs-plugin-zoom 적용: 드래그로 영역 확대, 더블클릭이나 리셋 버튼으로 원래대로. 호버하면 상품 팝업 표시.

브랜드 점유율 트리맵 (full-width, tall) — Chart.js가 아닌 직접 DOM으로 구현. squarify 알고리즘을 JS로 구현해서 div를 절대 위치로 배치해줘. 상위 20개 브랜드, 면적은 상품 수 비례, COLORS 배열 색상 순환. 셀이 충분히 크면(50x30 이상) 브랜드명과 개수 표시. 호버하면 해당 브랜드 대표 상품 팝업.

가격 vs 순위 산점도 (full-width, tall) — 줌 기능 동일. 호버 시 상품 팝업.

쇼핑몰별 상품 수 TOP 15 — 가로 막대 차트(indexAxis:'y')

상품 타입 분포 — polarArea 차트, 범례 오른쪽. 타입 코드→이름 매핑: {1:'일반-가격비교', 2:'일반-비매칭', 3:'일반-매칭', 4:'중고-가격비교', 5:'중고-비매칭', 6:'중고-매칭', 7:'단종-가격비교', 8:'단종-비매칭', 9:'단종-매칭', 10:'예정-가격비교', 11:'예정-비매칭', 12:'예정-매칭'}

브랜드별 평균 가격 TOP 10 — 세로 막대 차트, 파란 계열 색상.

가격 구간별 상품 수 (사분위) — 4개 막대(Q1이하/Q1Q2/Q2Q3/Q3이상), 각각 민트/파랑/주황/빨강. 툴팁에 해당 가격 범위 표시.

브랜드 TOP 5 레이더 비교 (full-width) — 5개 축, 반투명 채우기.

카테고리(중분류)별 가격 범위 (full-width) — 그룹드 바 차트 3개 데이터셋: 최저가(민트), 평균가(파랑), 최고가(빨강)

--- 탭3: 인사이트 ---

인사이트 카드 6개 (2열 그리드):

가격 변동성 분석 — CV 기준 메시지 (100%↑ 매우 큼, 50%↑ 상당, 그 외 안정)
가격 분포 형태 — 평균 vs 중앙값 비교로 편향 방향 설명
시장 경쟁 구조 — 쇼핑몰 수, 상위 3개 점유율, 집중/분산 판단
브랜드 분석 — 최다 브랜드명, 노브랜드 비율
가격대 추천 — IQR 범위(Q1~Q3)에 50% 집중
이상치 탐지 — IQR 기반 이상치 개수, 메시지 카드 왼쪽 보더 색상: 기본 민트, warn 주황, info 파랑, danger 빨강.
상품명 키워드 클라우드: 빈도 비율에 따라 size-1~size-4 클래스 적용 (11px~17px, 높은 빈도일수록 민트색+큰 글씨) 각 태그에 title 속성으로 "N회" 표시.

가격대별 경쟁 강도 복합 차트 (full-width): 막대(상품 수, 왼쪽 Y축) + 꺾은선(평균 가격, 오른쪽 Y축) 듀얼 축.

--- 탭4: 상품목록 ---

상단 툴바: 왼쪽에 총 개수 표시, 정렬 드롭다운(순서 기본/가격 낮은순/높은순/상품명 ㄱ→ㅎ/ㅎ→ㄱ/쇼핑몰순/브랜드순). 오른쪽에 뷰 전환 토글 버튼 3개: ☰ 테이블(기본), ▦ 카드, ▣ 갤러리

테이블 뷰: 컬럼 — #, 이미지(52px 썸네일), 상품명(링크, 클릭→새 탭), 최저가(민트 강조), 최고가, 쇼핑몰(뱃지), 브랜드, 카테고리(1>2), 타입. 헤더 클릭하면 해당 컬럼 기준 오름차순/내림차순 토글 정렬. 정렬 화살표(▲▼⇅) 표시. 최대 높이 700px, 세로 스크롤. 헤더는 sticky. 이미지 호버 시 상품 팝업 표시.

카드 뷰: auto-fill 그리드(최소 240px). 카드에 이미지(180px), 상품명(2줄 clamp), 가격, 메타 뱃지(쇼핑몰/브랜드/카테고리). 클릭→새 탭. 호버 시 위로 뜨고 민트 보더+그림자.

갤러리 뷰: auto-fill 그리드(최소 160px), 정사각형(aspect-ratio:1). 이미지 꽉 채우고, 하단에 그라데이션 오버레이로 가격/상품명 표시. 호버 시 약간 확대.

2-5. 상품 팝업

마우스를 올리면 따라다니는 플로팅 팝업(300px 너비)을 만들어줘. 상단에 상품 이미지(160px 높이), 하단에 상품명(2줄 clamp), 가격(큰 민트색), 메타정보(쇼핑몰/브랜드/카테고리 경로). 화면 밖으로 나가지 않도록 위치 보정 처리해줘. pointer-events:none으로 클릭 방해 안 되게.

2-6. 기타 UI 요소

로딩 오버레이: 전체 화면 반투명 검정 배경 + 가운데 카드(스피너 애니메이션 + "상품 데이터 수집 중..." 텍스트)
토스트 알림: 우하단 고정, 성공(민트 보더)/에러(빨강 보더). 3초 후 자동 사라짐, 슬라이드업 애니메이션.
분석 시작 전에는 오른쪽 패널에 빈 상태 화면 표시 (📊 아이콘 + "분석 대기 중" 메시지)
======================================== 
3. 디자인
========================================
전체적으로 다크 테마 대시보드 느낌으로 해줘.

색상 변수 (CSS :root)

배경: #0d0d0d (primary), #1a1a1a (secondary), #252525 (tertiary), #1e1e1e (card)
보더: #333
텍스트: #f0f0f0 (primary), #aaa (secondary), #666 (muted)
액센트(민트): #00d4aa (기본), #00f0c0 (밝은), #00a885 (어두운)
액센트 배경: rgba(0,212,170,0.08), 액센트 보더: rgba(0,212,170,0.25)
danger: #ff5252, warning: #ffab40, info: #448aff, success: #69f0ae
레이아웃

상단 헤더: sticky, 로고(민트 그라데이션 정사각형에 "N"), 제목 "네이버 쇼핑 분석기"("분석기"만 민트색), 오른쪽 뱃지
메인: 2열 그리드 — 왼쪽 패널 340px 고정, 오른쪽 나머지. 전체 높이 100vh - 헤더.
1024px 이하 반응형: 1열 전환, 차트 그리드도 1열.
폰트

Google Fonts 'Jua' (한글 둥근 폰트) 사용. 모든 input, select, button에도 적용.
차트 컬러 팔레트 (JS 배열) 15색: #00d4aa, #448aff, #ffab40, #ff5252, #b388ff, #69f0ae, #ff80ab, #ffd740, #80d8ff, #ea80fc, #a7ffeb, #ffe57f, #ff9e80, #82b1ff, #ccff90

스크롤바 6px 너비, 트랙 #1a1a1a, 썸 #00a885 둥근 모서리.

공통 스타일 디테일

카드/패널: border-radius 12px, 1px solid #333 보더
버튼/인풋 포커스: 보더 민트색 변경, outline 없음
호버 효과: 카드 위로 2~3px 이동 + 보더 민트, 부드러운 transition 0.2s
차트 기본 설정: Chart.defaults.color='#aaa', font.family='Jua', borderColor='#333'
======================================== 
4. 기술
========================================
백엔드

Python Flask (flask, requests 패키지 사용)
단일 파일 app.py, HTML은 render_template_string으로 인라인 처리
포트 5000, debug=True, use_reloader=False
프론트엔드

순수 HTML + CSS + JavaScript (프레임워크 없음)
Chart.js 4.4.1 (CDN: cdn.jsdelivr.net)
chartjs-plugin-zoom 2.0.1 (CDN) — 드래그 줌 모드
Google Fonts Jua
API

네이버 쇼핑 검색 API: GET https://openapi.naver.com/v1/search/shop.json
헤더: X-Naver-Client-Id, X-Naver-Client-Secret
프론트 → 백엔드: POST /api/analyze (JSON)
백엔드 → 프론트: JSON (items 배열 + stats 객체)
트리맵 알고리즘

squarify 알고리즘을 JavaScript로 직접 구현해줘. 컨테이너의 긴 쪽부터 채워나가면서 worst ratio가 나빠지기 전까지 한 행에 넣는 방식. 결과는 {x, y, w, h, data} 배열로 반환하고, 각각 absolute position div로 렌더링.
======================================== 
5. 추가 조건
========================================
app.py 하나에 모든 코드(파이썬 백엔드 + HTML/CSS/JS 프론트엔드)를 담아줘. 외부 파일 분리 없이.
HTML 템플릿 문자열은 r""" (raw string)으로 감싸서 이스케이프 문제 없게 해줘.
파일 맨 위에 주석으로 앱 이름과 실행 방법(pip install flask requests 후 python app.py) 넣어줘.
상품 팝업은 모든 차트(버블, 산점도, 트리맵)와 상품 목록(테이블 썸네일, 카드, 갤러리)에서 동작하게 해줘.
차트 인스턴스는 객체(chartInstances)로 관리하고, 새로 그리기 전에 기존 것을 destroy해줘.
analysisData를 전역 변수로 잡아서 정렬/뷰 전환 시 재활용해줘.
이미지 로딩 실패 시 onerror로 숨기거나 배경색 처리해줘.
모든 가격 표시에 toLocaleString() 적용해서 천 단위 콤마 넣어줘.
HTML 태그가 포함된 상품명(네이버 API가 태그 포함)은 cleanTitle 함수로 제거해줘.
분석 버튼은 수집 중 disabled 처리하고 텍스트 "⏳ 수집 중..."으로 바꿔줘.
Chart.js 줌 플러그인 옵션: drag 모드, 배경 rgba(0,212,170,0.1), 보더 rgba(0,212,170,0.4).
차트 카드 타이틀 옆에 줌 힌트 텍스트("🖱 드래그:확대 · 더블클릭:리셋")와 리셋 버튼 넣어줘.